<template>
  <div>
    <el-card >
    <div v-for="item in videos " :key="item.id" style="margin: 10px 0 ;padding: 10px 0 ; border-bottom: 1px dashed #ccc">
      <div style="font-size: 17px; cursor: pointer;  " class="item" @click="videoDetail(item)">{{item.name}}}</div>
      <div style="font-size: 12px;float: right ;margin-top: -10px ;color: cornflowerblue">文件大小：{{item.size}} kb</div>
    </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Videos",
  data(){
    return{
      videos:[]
    }
  },
  methods:{
    videoDetail(item){
      this.$router.push({path:"/front/videoDetail" ,query :{item: item}})
    }
  },
  created(){
    this.request.get("/file/videos").then(res=>{
      console.log(res)
      this.videos = res.data.filter(v => v.type === 'mp4')
      console.log(this.videos)
    })
  }
}
</script>

<style scoped>
.item:hover{
  color: cornflowerblue;
  background: none;
}
</style>